<template>
	<view class="x-input">
		<x-cell :border="props.border">
			<template #icon>
				<slot name="icon"></slot>
			</template>

			<template #title>
				<view :style="{width: props.labelWidth}" class="x-row" style="position: relative;">
					<view style="width: 12rpx;color: red;position: absolute;left: -20rpx;top: 4rpx">
						<text v-if="props.required">*</text>
					</view>
					<view class="x-label">{{props.label}}</view>
				</view>
			</template>

			<template #value>
				<view class="control" :style="{width: 'calc(100% - ' + props.labelWidth + '})'}">
					<uni-easyinput :type="props.inputType" :disabled="props.disabled" :clearable="false"
						@tap="onClick" :styles="styles" placeholderStyle="color: #999;font-size: 28rpx;font-weight: 400;text-align: right;padding-left: 0;padding-right: 0"
						:value="curValue" @input="onInput" @blur="onBlur" :inputBorder="false"
						:placeholder="props.placeholder">
					</uni-easyinput>
				</view>
			</template>

			<template #suffix>
				<view @tap="onIconClick">
					<slot name="suffix">
						<uni-icons style="margin-left: 10rpx;" color="#999" size="20"
							:type="props.suffixIcon"></uni-icons>
					</slot>
				</view>
			</template>

		</x-cell>
	</view>
</template>
<script>
	export default {
	  options: {
	    styleIsolation: 'shared'
	  },
	}
</script>
<script setup name="x-input">
	import XCell from '@/components/lib/cell';

	import {
		computed,
		nextTick,
		onMounted,
		ref,
		toRaw,
		watch
	} from "vue";

	const props = defineProps({
		label: String,
		labelWidth: {
			type: String,
			default: "180rpx"
		},
		modelValue: {
			type: [String, Number],
			default: ""
		},
		placeholder: {
			type: String,
			default: ""
		},
		textAlign: {
			type: String,
			default: 'right'
		},
		required: {
			type: Boolean,
			default: false,
		},

		suffixIcon: String,

		disabled: {
			type: Boolean,
			default: false
		},
		border: {
			type: Boolean,
			default: true
		}
	})

	let styles = ref({"color": "#999"})
	onMounted(() => {
		nextTick(async () => {
			setValue(props.modelValue);
		})
	})

	const emit = defineEmits([
		'update:modelValue',
		'onClick',
		'onIconClick',
		'blur'
	])

	const curValue = ref("")
	watch(curValue, (value) => {
		emit('update:modelValue', value)
	})
	const setValue = (value) => {
		curValue.value = value;
	}

	watch(() => props.modelValue, (value) => {
		setValue(value)
	})

	const onClick = () => {
		emit('onClick', toRaw(curValue));
	}

	const onIconClick = () => {
		emit('onIconClick', toRaw(curValue));
	}

	const onInput = (e) => {
		curValue.value = e;
	}

	const onBlur = () => {
		emit("blur");
	}

</script>

<style scoped lang="less">
	::v-deep .is-disabled {
		background-color: #fff;
	}

  ::v-deep .uni-easyinput__placeholder-class{
    font-size: 28rpx;
  }

	::v-deep .uni-easyinput {
		width: 100%;
		flex: 1;
		position: relative;
		text-align: right;
		color: #999;
		font-size: 28rpx;

		input {
			padding-right: 0 !important;
			background-color: transparent;
      width: 360rpx;
		}
	}
</style>
